<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站相册推荐展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --secondary: #6366f1;
            --light: #f3f4f6;
            --dark: #1f2937;
            --gray: #6b7280;
            --light-gray: #e5e7eb;
            --danger: #ef4444;
            --success: #10b981;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f9fafb;
            color: var(--dark);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            display: inline-block;
        }
        
        .section-container {
            margin-bottom: 50px;
        }
        
        .section-header {
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
            margin: 0;
        }
        
        .album-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 20px;
        }
        
        .album-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 相册图片容器样式 */
        .album-media {
            position: relative;
            overflow: hidden;
        }
        
        .album-single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .album-card:hover .album-single-image {
            transform: scale(1.05);
        }
        
        .album-multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 3px;
            height: 200px;
        }
        
        .album-multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .album-no-image {
            height: 200px;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
        }
        
        .image-count {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
        }
        
        /* 相册信息样式 */
        .album-info {
            padding: 15px;
        }
        
        .album-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .album-description {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        /* 作者信息 */
        .album-author {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 0.9rem;
        }
        
        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            color: var(--dark);
            font-weight: 500;
        }
        
        /* 统计信息 */
        .album-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 12px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 操作按钮 */
        .album actions {
            display: flex;
            gap: 10px;
        }
        
        .album-action {
            background-color: var(--light);
            border: none;
            color: var(--gray);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .album-action:hover {
            background-color: var(--light-gray);
        }
        
        .album-action.primary {
            background-color: var(--primary);
            color: white;
        }
        
        .album-action.primary:hover {
            background-color: var(--primary-dark);
        }
        
        /* 网格布局特定样式 */
        .grid-layout .album-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .grid-layout .album-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-layout .album-actions {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
        }
        
        /* 列表布局特定样式 */
        .list-layout .album-card {
            display: flex;
            height: 200px;
        }
        
        .list-layout .album-media {
            flex: 0 0 250px;
        }
        
        .list-layout .album-single-image,
        .list-layout .album-multi-images,
        .list-layout .album-no-image {
            height: 100%;
        }
        
        .list-layout .album-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .album-actions {
            margin-top: auto;
            align-self: flex-start;
        }
        
        /* 特色布局特定样式 */
        .featured-layout .album-card.featured {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 350px;
        }
        
        .featured-layout .album-card:not(.featured) {
            height: 170px;
            display: flex;
        }
        
        .featured-layout .album-card.featured .album-media {
            height: 100%;
        }
        
        .featured-layout .album-card.featured .album-single-image,
        .featured-layout .album-card.featured .album-multi-images,
        .featured-layout .album-card.featured .album-no-image {
            height: 100%;
        }
        
        .featured-layout .album-card:not(.featured) .album-media {
            flex: 0 0 150px;
        }
        
        .featured-layout .album-card:not(.featured) .album-single-image,
        .featured-layout .album-card:not(.featured) .album-multi-images,
        .featured-layout .album-card:not(.featured) .album-no-image {
            height: 100%;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .list-layout .album-card,
            .featured-layout .album-card.featured {
                flex-direction: column;
                height: auto;
                display: flex;
            }
            
            .list-layout .album-media,
            .featured-layout .album-card.featured .album-media {
                flex: none;
                width: 100%;
            }
            
            .featured-layout .album-card.featured {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title mx-auto">社交网站相册推荐</h1>
        
        <!-- 1. 网格布局相册推荐 -->
        <div class="section-container grid-layout">
            <div class="section-header">
                <i class="fas fa-th-large text-primary"></i>
                <h2 class="section-title">网格布局相册</h2>
            </div>
            
            <div class="row">
                <!-- 多图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <div class="album-multi-images">
                                <img src="https://picsum.photos/id/29/300/300" alt="相册图片1" class="album-multi-image">
                                <img src="https://picsum.photos/id/30/300/300" alt="相册图片2" class="album-multi-image">
                                <img src="https://picsum.photos/id/31/300/300" alt="相册图片3" class="album-multi-image">
                                <img src="https://picsum.photos/id/32/300/300" alt="相册图片4" class="album-multi-image">
                            </div>
                            <div class="image-count">8 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">夏日海边度假记录</h3>
                            <p class="album-description">这个夏天和家人一起去海边度假的美好回忆，阳光、沙滩和海浪。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">陈明</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 1.2k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 32
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 245
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <img src="https://picsum.photos/id/65/600/400" alt="相册封面" class="album-single-image">
                            <div class="image-count">1 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">城市日落全景</h3>
                            <p class="album-description">在城市最高楼拍摄的日落全景，难得一见的美景。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/65/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">李华</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 3.5k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 87
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 562
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <div class="album-no-image">
                                <i class="fas fa-images fa-3x"></i>
                            </div>
                            <div class="image-count">0 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">我的旅行计划</h3>
                            <p class="album-description">即将开始的欧洲之旅计划，包含详细的行程安排和景点介绍。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/91/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">王芳</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 842
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 45
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 128
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 多图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <div class="album-multi-images">
                                <img src="https://picsum.photos/id/42/300/300" alt="相册图片1" class="album-multi-image">
                                <img src="https://picsum.photos/id/43/300/300" alt="相册图片2" class="album-multi-image">
                                <img src="https://picsum.photos/id/44/300/300" alt="相册图片3" class="album-multi-image">
                            </div>
                            <div class="image-count">5 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">春季花卉摄影集</h3>
                            <p class="album-description">春天公园里各种花卉的特写摄影，记录花开的美好瞬间。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/25/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">赵伟</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 2.1k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 56
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 327
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <img src="https://picsum.photos/id/26/600/400" alt="相册封面" class="album-single-image">
                            <div class="image-count">1 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">山间云海奇观</h3>
                            <p class="album-description">凌晨五点登山拍摄的云海景观，宛如仙境一般。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">陈明</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 4.8k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 124
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 783
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 多图相册 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-media">
                            <div class="album-multi-images">
                                <img src="https://picsum.photos/id/54/300/300" alt="相册图片1" class="album-multi-image">
                                <img src="https://picsum.photos/id/55/300/300" alt="相册图片2" class="album-multi-image">
                            </div>
                            <div class="image-count">3 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">美食制作记录</h3>
                            <p class="album-description">周末在家尝试制作的意大利面，从准备食材到成品的全过程。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/65/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">李华</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 1.5k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 67
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 219
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="album-action primary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="album-action">
                                    <i class="far fa-share-alt"></i> 分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 2. 列表布局相册推荐 -->
        <div class="section-container list-layout">
            <div class="section-header">
                <i class="fas fa-list text-primary"></i>
                <h2 class="section-title">列表布局相册</h2>
            </div>
            
            <!-- 多图相册 -->
            <div class="album-card">
                <div class="album-media">
                    <div class="album-multi-images">
                        <img src="https://picsum.photos/id/60/300/300" alt="相册图片1" class="album-multi-image">
                        <img src="https://picsum.photos/id/61/300/300" alt="相册图片2" class="album-multi-image">
                        <img src="https://picsum.photos/id/62/300/300" alt="相册图片3" class="album-multi-image">
                        <img src="https://picsum.photos/id/63/300/300" alt="相册图片4" class="album-multi-image">
                    </div>
                    <div class="image-count">12 张图片</div>
                </div>
                <div class="album-info">
                    <h3 class="album-title">城市建筑摄影合集</h3>
                    <p class="album-description">收集了城市中各种风格的建筑摄影，从古典到现代，展现城市发展的不同面貌。每一张照片都记录了建筑的独特之处和背后的故事。</p>
                    <div class="album-author">
                        <img src="https://picsum.photos/id/91/100/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">王芳</span>
                    </div>
                    <div class="album-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 5.7k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 156
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 982
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 342
                        </div>
                    </div>
                    <div class="album-actions">
                        <button class="album-action primary">
                            <i class="far fa-heart"></i> 点赞
                        </button>
                        <button class="album-action">
                            <i class="far fa-comment"></i> 评论
                        </button>
                        <button class="album-action">
                            <i class="far fa-share-alt"></i> 分享
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图相册 -->
            <div class="album-card">
                <div class="album-media">
                    <div class="album-no-image">
                        <i class="fas fa-music fa-3x"></i>
                    </div>
                    <div class="image-count">0 张图片</div>
                </div>
                <div class="album-info">
                    <h3 class="album-title">我的音乐收藏清单</h3>
                    <p class="album-description">整理了我多年来收藏的音乐专辑和单曲，按风格分类，包含摇滚、爵士、古典等多种类型，附带简单的推荐理由。</p>
                    <div class="album-author">
                        <img src="https://picsum.photos/id/25/100/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">赵伟</span>
                    </div>
                    <div class="album-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 2.3k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 98
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 456
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 512
                        </div>
                    </div>
                    <div class="album-actions">
                        <button class="album-action primary">
                            <i class="far fa-heart"></i> 点赞
                        </button>
                        <button class="album-action">
                            <i class="far fa-comment"></i> 评论
                        </button>
                        <button class="album-action">
                            <i class="far fa-share-alt"></i> 分享
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 单图相册 -->
            <div class="album-card">
                <div class="album-media">
                    <img src="https://picsum.photos/id/28/600/400" alt="相册封面" class="album-single-image">
                    <div class="image-count">1 张图片</div>
                </div>
                <div class="album-info">
                    <h3 class="album-title">雨后的城市街道</h3>
                    <p class="album-description">一场大雨过后，城市街道被冲刷得干干净净，反射着霓虹灯的光芒，呈现出不一样的城市夜景。</p>
                    <div class="album-author">
                        <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">陈明</span>
                    </div>
                    <div class="album-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 3.8k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 103
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 672
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 215
                        </div>
                    </div>
                    <div class="album-actions">
                        <button class="album-action primary">
                            <i class="far fa-heart"></i> 点赞
                        </button>
                        <button class="album-action">
                            <i class="far fa-comment"></i> 评论
                        </button>
                        <button class="album-action">
                            <i class="far fa-share-alt"></i> 分享
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 3. 特色布局相册推荐 -->
        <div class="section-container featured-layout">
            <div class="section-header">
                <i class="fas fa-star text-primary"></i>
                <h2 class="section-title">特色布局相册</h2>
            </div>
            
            <!-- 重点推荐相册 -->
            <div class="album-card featured mb-4">
                <div class="album-media">
                    <img src="https://picsum.photos/id/110/800/600" alt="相册封面" class="album-single-image">
                    <div class="image-count">24 张图片</div>
                </div>
                <div class="album-info">
                    <h3 class="album-title">国家公园全景摄影集</h3>
                    <p class="album-description">历时三个月，走访了五个国家公园，用镜头记录下大自然的壮丽景色。从雪山到峡谷，从森林到湖泊，每一张照片都展现了自然的鬼斧神工。</p>
                    <div class="album-author">
                        <img src="https://picsum.photos/id/65/100/100" alt="作者头像" class="author-avatar">
                        <span class="author-name">李华</span>
                        <span class="badge bg-primary text-white ms-2">官方推荐</span>
                    </div>
                    <div class="album-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i> 12.5k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i> 328
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i> 2.4k
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i> 1.1k
                        </div>
                    </div>
                    <div class="album-actions">
                        <button class="album-action primary">
                            <i class="far fa-heart"></i> 点赞
                        </button>
                        <button class="album-action">
                            <i class="far fa-comment"></i> 评论
                        </button>
                        <button class="album-action">
                            <i class="far fa-share-alt"></i> 分享
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <!-- 多图相册 -->
                <div class="col-md-6">
                    <div class="album-card">
                        <div class="album-media">
                            <div class="album-multi-images">
                                <img src="https://picsum.photos/id/96/300/300" alt="相册图片1" class="album-multi-image">
                                <img src="https://picsum.photos/id/97/300/300" alt="相册图片2" class="album-multi-image">
                                <img src="https://picsum.photos/id/98/300/300" alt="相册图片3" class="album-multi-image">
                            </div>
                            <div class="image-count">6 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">街头艺术摄影</h3>
                            <p class="album-description">城市中的各种街头艺术作品，包括涂鸦、壁画等。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/91/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">王芳</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 3.2k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 543
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图相册 -->
                <div class="col-md-6">
                    <div class="album-card">
                        <div class="album-media">
                            <img src="https://picsum.photos/id/99/600/400" alt="相册封面" class="album-single-image">
                            <div class="image-count">1 张图片</div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">星空摄影</h3>
                            <p class="album-description">远离城市光污染的地方拍摄的星空，银河清晰可见。</p>
                            <div class="album-author">
                                <img src="https://picsum.photos/id/25/100/100" alt="作者头像" class="author-avatar">
                                <span class="author-name">赵伟</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 4.7k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 876
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.album-action:has(i.far.fa-heart)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标状态
                    icon.classList.toggle('far');
                    icon.classList.toggle('fas');
                    
                    // 切换按钮样式
                    if (icon.classList.contains('fas')) {
                        this.classList.add('primary');
                        this.classList.add('bg-danger');
                        this.classList.remove('bg-light');
                    } else {
                        this.classList.remove('primary');
                        this.classList.remove('bg-danger');
                        this.classList.add('bg-light');
                    }
                });
            });
            
            // 收藏功能
            const bookmarkButtons = document.querySelectorAll('.album-action:has(i.far.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标状态
                    icon.classList.toggle('far');
                    icon.classList.toggle('fas');
                });
            });
        });
    </script>
</body>
</html>
    
